<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Promise animation</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 40px;
            height: 40px;
            border-radius: 40px;
        }
        .red {
            background: red;
        }
        .blue {
            background: blue;
        }
        .green {
            background: green;
        }
    </style>
</head>
<body>
    <div class="box red" style="margin-left: 0;"></div>
    <div class="box blue" style="margin-left: 0;"></div>
    <div class="box green" style="margin-left: 0;"></div>
</body>
<!-- <script src="../node_modules/blubird/js/browser/bluebird.min.js" charset="utf-8"></script> -->
<script type="text/javascript">

    var box1 = document.querySelector(".red");
    var box2 = document.querySelector(".blue");
    var box3 = document.querySelector(".green");
    console.log(box1, box2, box3);

/*
    function animate(box, distance, callback) {
        setTimeout(function() {
            var marginLeft = parseInt(box.style.marginLeft, 10);
            console.log(marginLeft);
            if(marginLeft === distance) {
                callback && callback();
            } else {
                if(marginLeft < distance) {
                    marginLeft++;
                } else {
                    marginLeft--;
                }
                // 这里要加上单位才能生效
                box.style.marginLeft = marginLeft + 'px';
                animate(box, distance, callback);
            }

        }, 13);
    }


    animate(box1, 100, function () {
        animate(box2, 200, function (){
            animate(box3, 299, function() {
                animate(box3, 150, function (){
                    animate(box2, 150, function () {
                        animate(box1, 150, function () {
                            // END ANIMATION
                        })
                    })
                })
            })
        })
    })


*/

    var Promise = window.Promise;
    function promiseAnimate(box, distance) {
        return new Promise((resove, reject) => {
            function _animate() {
                setTimeout(function() {
                    var marginLeft = parseInt(box.style.marginLeft, 10);
                    console.log(marginLeft);
                    if(marginLeft === distance) {
                        resove()
                    } else {
                        if(marginLeft < distance) {
                            marginLeft++;
                            // _animate();
                        } else {
                            marginLeft--;
                            // _animate();
                        }
                        // 这里要加上单位才能生效
                        box.style.marginLeft = marginLeft + 'px';
                        _animate();
                    }
                }, 13);
            }
            _animate();
        });
    }
// 回调比较清晰
    promiseAnimate(box1, 100)
        .then(function () {
            return promiseAnimate(box2, 200)
        })
        .then(function () {
            return promiseAnimate(box3, 300)
        })
        .then(function () {
            return promiseAnimate(box3, 150)
        })
        .then(function () {
            return promiseAnimate(box2, 150)
        })
        .then(function () {
            return promiseAnimate(box1, 150)
        })

</script>
</html>
